<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城官网</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">
</head>

<body>
    <!-- 1.头部 -->
    <div class="head">
        <div class="center">
            <div class="left">
                <h5>
                    <img src="./img/clock.png">
                    <span>在线时间 08:30~21:30</span>
                </h5>

                <p>
                    欢迎访问家用设备在线商城!
                </p>
            </div>

            <div class="right">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#"><img src="./img/gwc.png"><span>1</span></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav">
        <div class="center">
            <h3>XXX官网商城</h3>
            <div class="other">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">所有商品</a></li>
                    <li><a href="#">商城动态</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">线下门店</a></li>
                </ul>
                <div class="search">
                    <input type="text" placeholder="请输入关键字">
                    <button>搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 3.横幅 -->
    <div class="banner">
        <div class="center">
            <ul>
                <li><a href="#">VR眼镜</a></li>
                <li><a href="#">无人机</a></li>
                <li><a href="#">电动车</a></li>
                <li><a href="#">智能手表</a></li>
                <li><a href="#">商城动态</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
    </div>

    <!-- 4.未来已来 -->
    <div class="wl">
        <div class="center">
            <ul>
                <li>
                    <img src="./img/yanjing.jpg">
                    <div>
                        <h4>未来已来</h4>
                        <p>您可以双击这里或者点击编辑按钮来修改内容</p>
                    </div>
                </li>

                <li>
                    <img src="./img/uav.jpg">
                    <div>
                        <h4>未来已来</h4>
                        <p>您可以双击这里或者点击编辑按钮来修改内容</p>
                    </div>
                </li>

                <li>
                    <img src="./img/watch.jpg">
                    <div>
                        <h4>未来已来</h4>
                        <p>您可以双击这里或者点击编辑按钮来修改内容</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 5 6 7 8商品 -->
    <!-- 5无人机 -->
    <div class="goods">
        <div class="title">
            <div class="center">
                <h4>四轴航拍无人机<span>科技改变生活</span></h4>
                <span><a href="#">MORE+</a></span>
            </div>
        </div>
        <div class="center">
            <div class="left">
                <img src="./img/u.png">
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/u1.jpg">
                            </div>
                            <div class="text">
                                <span>四轴航拍无人机</span>
                                <span>4K只能航拍无人机 入门良选</span>
                                <span>￥8900</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/u2.jpg">
                            </div>
                            <div class="text">
                                <span>四轴航拍无人机001</span>
                                <span>4K只能航拍无人机 入门良选</span>
                                <span>￥10900</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/u3.jpg">
                            </div>
                            <div class="text">
                                <span>四轴航拍无人机002</span>
                                <span>4K只能航拍无人机 入门良选</span>
                                <span>￥8900</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/u4.jpg">
                            </div>
                            <div class="text">
                                <span>四轴航拍无人机B03</span>
                                <span>4K只能航拍无人机 入门良选</span>
                                <span>￥5900</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/u5.jpg">
                            </div>
                            <div class="text">
                                <span>四轴航拍无人机0063</span>
                                <span>4K只能航拍无人机 入门良选</span>
                                <span>￥8900</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/u6.jpg">
                            </div>
                            <div class="text">
                                <span>四轴航拍无人机042</span>
                                <span>4K只能航拍无人机 入门良选</span>
                                <span>￥12000</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 6VR眼镜 -->
    <div class="goods">
        <div class="title">
            <div class="center">
                <h4>身临其境的VR体验<span>科技改变生活</span></h4>
                <span><a href="#">MORE+</a></span>
            </div>
        </div>
        <div class="center">
            <div class="left">
                <img src="./img/vr.png">
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/vr1.jpg">
                            </div>
                            <div class="text">
                                <span>VR1代头戴眼镜</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/vr2.jpg">
                            </div>
                            <div class="text">
                                <span>VR2代头戴眼镜</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/vr3.jpg">
                            </div>
                            <div class="text">
                                <span>VR3代头戴眼镜</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/vr4.jpg">
                            </div>
                            <div class="text">
                                <span>VR4代头戴眼镜</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/vr5.jpg">
                            </div>
                            <div class="text">
                                <span>VR5代头戴眼镜</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/vr6.jpg">
                            </div>
                            <div class="text">
                                <span>VR6代头戴眼镜</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 7平衡车 -->
    <div class="goods">
        <div class="title">
            <div class="center">
                <h4>绿色出行电动车<span>节能环保新主张</span></h4>
                <span><a href="#">MORE+</a></span>
            </div>
        </div>
        <div class="center">
            <div class="left">
                <img src="./img/car.png">
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/car1.jpg">
                            </div>
                            <div class="text">
                                <span>独轮车</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/car2.jpg">
                            </div>
                            <div class="text">
                                <span>踏板平衡车</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/car3.jpg">
                            </div>
                            <div class="text">
                                <span>踏板平衡车</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/car4.jpg">
                            </div>
                            <div class="text">
                                <span>踏板平衡车</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/car5.jpg">
                            </div>
                            <div class="text">
                                <span>踏板平衡车</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/car6.jpg">
                            </div>
                            <div class="text">
                                <span>独轮车</span>
                                <span>电影手机专业3D虚拟现实智能眼镜</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 8手表 -->
    <div class="goods goods-l">
        <div class="title">
            <div class="center">
                <h4>智能手表<span>科技改变生活</span></h4>
                <span><a href="#">MORE+</a></span>
            </div>
        </div>
        <div class="center">
            <div class="left">
                <img src="./img/wacth.png">
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/wacth1.png">
                            </div>
                            <div class="text">
                                <span>智能手表 smartwatch</span>
                                <span>实时监测体温、血压、心率</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/wacth2.png">
                            </div>
                            <div class="text">
                                <span>智能手表 smartwatch</span>
                                <span>实时监测体温、血压、心率</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/wacth3.png">
                            </div>
                            <div class="text">
                                <span>智能手表 smartwatch</span>
                                <span>实时监测体温、血压、心率</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/wacth4.png">
                            </div>
                            <div class="text">
                                <span>智能手表 smartwatch</span>
                                <span>实时监测体温、血压、心率</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/wacth5.png">
                            </div>
                            <div class="text">
                                <span>智能手表 smartwatch</span>
                                <span>实时监测体温、血压、心率</span>
                                <span>￥1980</span>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./img/wacth6.png">
                            </div>
                            <div class="text">
                                <span>智能手表 smartwatch</span>
                                <span>实时监测体温、血压、心率</span>
                                <span>￥2100</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 9新闻资讯 -->
    <div class="news">
        <div class="title">
            <div class="center">
                <h4>新闻资讯<span>New </span></h4>
                <span><a href="#">MORE+</a></span>
            </div>
        </div>
        <div class="center">
            <div class="main">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./img/news1.png">
                            <div>
                                <p>
                                    声纹识别融合人工智能长虹重塑彩电行...
                                </p>
                                <p>
                                    您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。
                                </p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="./img/news2.png">
                            <div>
                                <p>
                                    声纹识别融合人工智能长虹重塑彩电行...
                                </p>
                                <p>
                                    您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。
                                </p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="./img/news3.png">
                            <div>
                                <p>
                                    声纹识别融合人工智能长虹重塑彩电行...
                                </p>
                                <p>
                                    您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。
                                </p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="./img/news4.png">
                            <div>
                                <p>
                                    声纹识别融合人工智能长虹重塑彩电行...
                                </p>
                                <p>
                                    您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。
                                </p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="left">
                <img src="./img/left1.png" alt="" id="i_left">
            </div>

            <div class="right">
                <img src="./img/right1.png" alt="" id="i_right">
            </div>
        </div>
    </div>

    <!-- 10其他 -->
    <div class="qt">
        <div class="center">
            <ul>
                <li>
                    <img src="./img/carche.png" alt="">
                    <div>
                        <p>滿1000元全國包郵</p>
                        <p>全場訂單滿1000元全國包郵</p>
                    </div>
                </li>

                <li>
                    <img src="./img/lipin.png" alt="">
                    <div>
                        <p>下單送精美禮品</p>
                        <p>本店購買任意商品贈送精美禮品</p>
                    </div>
                </li>

                <li>
                    <img src="./img/fuwu.png" alt="">
                    <div>
                        <p>貼心的售後服務</p>
                        <p>7x24小時售後隨時為您服務</p>
                    </div>
                </li>

                <li>
                    <img src="./img/youhui.png" alt="">
                    <div>
                        <p>店鋪優惠劵</p>
                        <p>每日整點可領取限量優惠劵</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 11页尾 -->
    <div class="foot">
        <!-- 12页尾1 -->
        <div class="foot1">
            <div class="center">
                <div class="left">
                    <ul>
                        <li>
                            <h4>About Change</h4>
                            <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>

                        <li>
                            <h4>Service</h4>
                            <p>消費者保障服务</p>
                            <p>七天无理由退款</p>
                            <p>假一赔三</p>
                        </li>

                        <li>
                            <h4>About Color</h4>
                            <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>

                        <li>
                            <h4>Online Payment</h4>
                            <p>
                                <img src="./img/yinglian.png" alt="">
                                <img src="./img/zhifubao.png" alt="">
                                <img src="./img/weixin.png" alt="">
                            </p>
                        </li>

                        <li>
                            <h4>Online Payment</h4>
                            <p>非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>

                        <li>
                            <h4>Wechat</h4>
                            <p>非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>
                    </ul>
                </div>

                <div class="right">
                    <div>
                        <h4>Social App</h4>
                        <img src="./img/app.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <!-- 13页尾2 -->
        <div class="foot2">
            <div class="center">
                <ul>
                    <li>
                        <h4>关于产品</h4>
                        <span>about color</span>
                        <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                    </li>

                    <li>
                        <h4>关于退货</h4>
                        <span>about change</span>
                        <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                    </li>

                    <li>
                        <h4>责任声明</h4>
                        <span>about color</span>
                        <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                    </li>

                    <li>
                        <h4>扫码关注</h4>
                        <span>about change</span>
                        <img src="./img/erweima.jpg" alt="">
                        <p>搜索微信号: youzhifang17</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    i_left.onmouseover = function () {
        i_left.src = './img/left2.png'
    }
    i_right.onmouseover = function () {
        i_right.src = './img/right2.png'
    }

    i_left.onmouseout = function () {
        i_left.src = './img/left1.png'
    }
    i_right.onmouseout = function () {
        i_right.src = './img/right1.png'
    }
</script>

</html>